<template>
  <div class="case-examine">
    <checked-title>
      <template #title>
        <div class="title">
          <span></span>
          本月案件数量（{{ title }}）
          <span></span>
          <!-- <div class="icon" @click="tabsClick">
            <img class="img" src="@/assets/images/shouyetab.png" alt="">
          </div>-->
        </div>
      </template>
    </checked-title>
    <div
      id="echarts"
      ref="echarts"
      style="width:100%;height:200px;"
    ></div>
  </div>
</template>

<script>
import { HomeDb } from '@/api'
export default {
  data() {
    return {
      title: '部门',
      option: {
        data: [],
        yData: []
      },
      type: 2
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // 本月案件办理考核TOP榜（街乡）
      HomeDb.getExamineTop({ type: this.type }).then(res => {
        const data = res.data.slice(0, 10)
        const optionData = []
        const yData = []
        data.forEach(element => {
          optionData.push(element.value)
          yData.push(element.name)
        })
        this.option.data = optionData.reverse()
        this.option.yData = yData.reverse()
        this.echarts()
      })
    },
    tabsClick() {
      this.title = this.type == 2 ? '街办' : '部门'
      this.type = this.type == 2 ? 1 : 2
      this.getData()
    },
    echarts() {
      var myChart3 = echarts.init(this.$refs.echarts)
      var option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '7%',
          top: '0%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          type: 'category',
          // axisLabel: {
          //   color: '#fff',
          //   fontSize: 16,
          //   align: 'right'
          // },
          
          axisLabel: {
            color: '#fff',
            fontSize: 16,
            align: 'right',
            // rotate: 50,
            margin: 15,
            formatter: function (value) {
              let ret = ''
              let max = 6
              let val = value.length
              let rowN = Math.ceil(val / max)
              if (rowN > 1) {
                for (let i = 0; i < rowN; i++) {
                  let temp = ''
                  let start = i * max
                  let end = start + max
                  temp = value.substring(start, end)
                  ret += temp
                }

                if (ret.length > 5) {
                  ret = ret.substring(0, 5) + '...'
                }

                return ret
              } else {
                return value
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: this.option.yData
        },
        dataZoom: {
          yAxisIndex: 0,
          show: false,
          type: 'slider',
          startValue: 0,
          endValue: 4
        },
        series: [
          {
            data: this.option.data,
            type: 'bar',
            barWidth: 18,
            // label: {
            //   normal: {
            //     show: true,
            //     position: ['340px', 0],
            //     textStyle: {
            //       color: '#e5e5e5', //color of value
            //       fontSize: 12
            //     }
            //   }
            // },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '16',
                    }
                }
            },
            itemStyle: {
              normal: {
                barBorderRadius: 8,
                //柱体的颜色
                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: function (params) {
                  var colorList = [
                    ['rgba(0, 113, 230, 0.95)', 'rgba(0, 198, 255, 1)'],
                    ['rgba(255, 129, 28, 0.47)', 'rgba(255, 129, 28, 0.5)'],
                    ['rgba(158, 255, 222, 0.95)', 'rgba(106, 255, 232, 1)'],
                    ['rgba(0, 228, 255, 0.95)', 'rgba(0, 228, 255, 1)'],
                    ['rgba(255, 30, 168, 0.47)', 'rgba(255, 30, 168, 0.5)'],
                    ['rgba(0, 113, 230, 0.95)', 'rgba(0, 198, 255, 1)'],
                    ['rgba(255, 129, 28, 0.47)', 'rgba(255, 129, 28, 0.5)'],
                    ['rgba(158, 255, 222, 0.95)', 'rgba(106, 255, 232, 1)'],
                    ['rgba(0, 228, 255, 0.95)', 'rgba(0, 228, 255, 1)'],
                    ['rgba(255, 30, 168, 0.47)', 'rgba(255, 30, 168, 0.5)']
                  ].reverse()
                  var colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: colorItem[0]
                      },
                      {
                        offset: 1,
                        color: colorItem[1]
                      }
                    ],
                    false
                  )
                }
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(18, 81, 210, 0.1)',
              borderRadius: 8
            }
          }
        ]
      }
      let timer = null
      var startNumber = 0
      // 有多少条数据
      var xAxisDatalen = this.option.data.length
      if (xAxisDatalen > 4) {
        // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
        var len = 4 // 街乡数量12，显示一屏
        timer && clearInterval(timer)
        timer = setInterval(function () {
          if (startNumber === xAxisDatalen - len) {
            startNumber = 0
          }
          myChart3.dispatchAction({
            type: 'dataZoom',
            startValue: startNumber,
            endValue: startNumber + len
          })
          startNumber++
        }, 2000)
      }
      myChart3.setOption(option3)
    }
  }
}
</script>

<style lang="less" scoped>
.case-examine {
  width: 100%;
  margin-top: 30px;
  padding: 0 10px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      transform: rotate(180deg);
      color: #00fbf0;
      cursor: pointer;
      width: 18px;
      height: auto;
      margin-left: 20px;
      margin-top: 20px;
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
